<style lang="scss">
	@import '@/assets/css/variable';
	.spectsBox{
		padding: 10px 16px;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		.itemSpecs{
			padding: 5px 4px;
			border-radius: 3px;
			margin-bottom: 10px;
			margin-right: 12px;
			line-height: 1.3em;
			&.activeBorder{
				color: $adornColor;
				border: 1px solid $adornColor;
			}
			&.unactiveBorder{
				color: #333333;
				border: 1px solid #666666;
			}
		}
	}
	.thisDetailBox{
		padding: 12px 12px;
	}
	.goodsDetail {
		width: 100%;
		background-color: $main-bgc-gray;
		min-height: 100%;
		font-size: 1.2rem;
		overflow-y: scroll;
		box-sizing: border-box;
		flex: 1;
		
		.list {
			padding: 1rem;
			$paddingSize: 0.8rem;

			.item {
				padding-top: $paddingSize;
				background-color: white;
				margin-bottom: 1rem;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-radius: 0.8rem;

				.line1 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 $paddingSize;

					.line1Left {
						display: flex;
						align-items: center;

						.type {
							font-size: 1.5rem;
							color: $color1;
						}
					}

					.line1Right {
						&.time {
							color: $color3;
						}
					}
				}

				.line2 {
					&.title {
						color: $color2;
						padding: $paddingSize;
						line-height: 1.3em;
						font-size: 1.3rem;
					}
				}

				.line3 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: $color2;
					border-top: 1px solid $border-c;
					padding: $paddingSize;
				}
			}
		}
		.fix-bottom {
		  position: fixed;
		  bottom: 0rem;
		  left: 0;
		  right: 0;
		  z-index: 1;
		  box-sizing: border-box;
		  background: white;
		  text-align: center;
		  border-top: 1px solid #f4f4f4;
		  padding: 0.5rem 1.6rem;
		  display: flex;
		  align-items: center;
		  justify-content: space-around;
		}
		.formPopBox{
			padding: 20px 0px 10px 0px;
			.formLine{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.label{
					font-size: 13px;
					color: #666;
				}
			}
			.totalBox{
				padding: 10px 16px;
				font-size: 16px;
			}
		}
	}
</style>
<template>
	<div class="goodsDetail">
		<!-- <van-dropdown-menu>
			<van-dropdown-item :title="selectTimeTitle" ref="item">
				<van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate"
					:max-date="maxDate" :formatter="formatter" @confirm="confirm" @cancel="cancel" />
			</van-dropdown-item>
		</van-dropdown-menu> -->
		<div>
			<van-image
			  width="100%"
			  height="170"
			  fit="cover"
			  :src="goodsItem.image"
			/>
		</div>
		<div class="margB-l">
			<van-cell-group>
				<van-cell :value="goodsItem.name" />
				<!-- <van-cell title="规格" :value="goodsItem.specs[0].name" /> -->
				<van-cell title="规格"/>
				<div class="spectsBox">
					<div class="itemSpecs" :class="activeSpect===index?'activeBorder':'unactiveBorder'" v-for="(item,index) in goodsItem.specs" @click="activeItemClick(item,index)">
						{{item.name}}
					</div>
				</div>
				<div v-if="spectdetail">
					<van-cell title="单价(￥)" :value="spectdetail.unified_price" />
					<van-cell title="所剩库存" :value="spectdetail.stock" />
					<van-cell title="起订数量" :value="spectdetail.set_num" />
					<van-cell title="限购数量" :value="spectdetail.quota" />
				</div>
					<van-cell title="过期时间" :value="goodsItem.endtime" />
					<!-- <van-cell title="有效期" :value="goodsItem.valid" /> -->
					<van-cell title="取货类型" :value="goodsItem.is_type==1?'快递':'到店'" />
					<van-cell title="详情"/>
					<div class="thisDetailBox" v-html="goodsItem.detailed"></div>
				
			</van-cell-group>
		</div>
		<div class="fix-bottom">
			<van-button round block color="#ff5500" @click="orderUpBtn">下单</van-button>
		</div>
		<van-popup v-model="showPop" position="bottom" :style="{ height: '400px' }">
			<div class="formPopBox">
				<van-form @submit="onSubmit">
				  <div class="totalBox">
					  总价：{{(form.num*Number(spectdetail.unified_price).toFixed(2)).toFixed()}} ￥
				  </div>
				  
				  <van-field name="stepper" label="数量" input-align="right">
				    <template #input>
				      <van-stepper v-model="form.num" min='1' max="10"/>
				    </template>
				  </van-field>
				  <van-field
				    v-model="form.mobile"
				    name="mobile"
				    label="手机号"
				    placeholder="请输入手机号"
				    required
				    clearable
					maxlength="11"
				    :rules="[{ required: true}]"
				  />
				  
				  <div v-if="goodsItem.is_type==1">
					  <van-field
					    v-model="form.contacts"
					    name="contacts"
					    label="联系人"
					    placeholder="请输入联系人"
					    required
					    clearable
					  	maxlength="12"
					    :rules="[{ required: true}]"
					  />
					  <van-field
					    v-model="form.address"
					    name="address"
					    label="收件地址"
					    placeholder="请输入收件地址"
					    required
					    clearable
					  	maxlength="22"
					    :rules="[{ required: true}]"
					  />
				  </div>
				  <div v-if="goodsItem.is_need_idcard==1">
					  <van-field
					    v-model="form.idcard"
					    name="mobile"
					    label="身份证号"
					    placeholder="请输入身份证号"
					    required
					    clearable
					  	maxlength="18"
					    :rules="[{ required: true}]"
					  />
				  </div>
				  <div style="margin: 16px;">
				    <van-button round block color="#ff5500" native-type="submit">提交</van-button>
				  </div>
				</van-form>
			</div>
		</van-popup>
		<div class="tabbar-height"></div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import {Dialog} from 'vant'
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	import {mapGetters,mapActions} from 'vuex'
	export default {
		name: "goodsDetail",
		mixins: [myMixins],
		components: {},
		data() {
			return {
				showPicker:false,
				showPop:false,
				selectTimeTitle: '筛选时间',
				minDate: new Date(2021, 1, 1),
				maxDate: new Date(2035, 10, 1),
				currentDate: new Date(),
				columns: ['大', '中', '小'],
				specs_id:'',
				form:{
					num:1,
					mobile:''
				},
				spectdetail:'',
				activeSpect:'',
				user_type_price:''
			}
		},
		computed:{
			...mapGetters(['goodsItem']),
		},
		watch:{
			// goodsItem(val) {
			// 	if(typeof this.goodsItem.specs == 'object'){
			// 		this.spectdetail = this.goodsItem.specs[0]
			// 		this.$forceUpdate()
			// 	}
			// 	const params = {
			// 		id:this.$route.query.id
			// 	}
			// 	this.GET_GoodsItem(params)
			// }
		},
		created() {
			console.log("created")
			const _this = this;
			console.log("this.goodsItem",this.goodsItem)
			const params = {
				id:this.$route.query.id
			}
			this.GET_GoodsItem(params).then(res=>{
				console.log("result:",res)
				// this.goodsItem = res
				this.spectdetail = this.goodsItem&&this.goodsItem.specs[0]
				// this.specs_id = this.spectdetail.id
			})
			// this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
			// if (!this.userInfo) {
			// 	this.$router.replace('/login')
			// }
			// this.getCode()
		},
		mounted() {
			console.log("mounted")
			// document.title = '活动管理'
			// this.messageList = this.$store.state.messageList
			// this.loading = false
			// this.finished = true
			// this.messageList[this.active] = []
			// this.NewsMovePage()
		},
		methods: {
			...mapActions(['GET_GoodsItem']),
			activeItemClick(item,index) {
				this.activeSpect = index
				this.spectdetail = this.goodsItem.specs[index]
				this.specs_id = this.spectdetail.id
				console.log("spectdetail",this.spectdetail)
				this.$forceUpdate()
			},
			onConfirm(value) {
			  this.form.sku = value;
			  this.showPicker = false;
			},
			onSubmit(values) {
				console.log(values,'values')
				this.visibleFormModal = false
				if(!this.$reg.digit.test(this.form.num)){
				  this.$message.error('请正确填写购买数量')
				  return
				}
				
				let val = {}
				
				if(this.goodsItem.is_need_idcard==1){// 是否需要身份证号 is_need_idcard == 1 是
				  if(!this.$reg.idCard.test(this.form.idcard)){
				    this.$message.error('请正确填写身份证号')
				    return
				  }else{
				    val.idcard =  this.form.idcard
				  }
				}
				
				if(!this.$reg.phone.test(this.form.mobile)){
				  this.$message.error('请正确填写手机号')
				  return
				}else{
				  val.mobile = this.form.mobile
				}
				
				console.log("this.spectdetail",this.spectdetail)
				console.log('this.user_type_price',this.user_type_price)
				this.user_type_price = localStorage.getItem('user_type_price')
				// this.spectdetail[this.user_type_price]
				
				// is_type == 1 为快递  2 为到店自提
				if(this.goodsItem.is_type==1){
				  val.contacts = this.form.contacts
				  val.address = this.form.address
				}
				     // merchant_id: "4"
				     // num: "2"
				     // price: "79.00"
				     // product_id: 103
				     // specs_id: 1490
				const params = {
				  product_id: this.goodsItem.id,
				  merchant_id:localStorage.getItem('merchant_id'),
				  specs_id: this.specs_id,
				  price: this.spectdetail[this.user_type_price],
				  num:this.form.num,
				  val: (val),//JSON.stringify
				}
				console.log("params",params)
				this.$request.OrderSave(params).then(res=>{
				  if(res.ret==200){
				    this.$toast('下单成功')
					this.showPop = false
					this.$router.push('/orderList')
				    // this.$emit('cancel')
				  }
				})
				// Dialog.alert({
				//   title: '温馨提示',
				//   message: '此处调用微信支付API',
				// }).then(() => {
				//   // on close
				// 	this.showPop = false;
				// });
				// this.$dialog.alert({
				// 	title: '温馨提示',
				// 	message: '此处调用微信支付接口',
				// 	closeOnClickOverlay: true
				// }).then(res=>{
				// 	console.log("sure")
				// 	this.showPop = false;
				// }).catch(res=>{
				// 	console.log("cancel")
				// })
			},
			orderUpBtn() {
				if(!this.specs_id){
					// this.$message.info('请选择商品规格')
					Dialog.alert({
					  title: '温馨提示',
					  message: '请选择商品规格',
					}).then(() => {
					  // on close
					});
				}else{
					this.showPop = true
				}
			},
			cancel() {
				this.$refs.item.toggle();
			},
			formatter(type, val) {
				if (type === 'year') {
					return `${val}年`;
				} else if (type === 'month') {
					return `${val}月`;
				} else if (type === 'day') {
					return `${val}日`;
				}
				return val;
			}
		}
	};
</script>
